<template>
	<div>
		<div class="block" style="margin-bottom: 10px;">
			<el-date-picker v-model="params.year" type="year" placeholder="选择日期" @change="getData" value-format="yyyy"
				style="width: 100px;" :clearable="false">
			</el-date-picker>
		</div>

		<div style="background: #F6F6F6;margin-bottom: 20px;border-radius: 4px;;">
			<el-row :gutter="20">
				<el-col :span="8">
					<div style="background: #fff;border-radius: 4px;padding: 10px;;">
						<div style="margin-bottom: 10px;">
							<div style="font-size: 13px;font-weight: bold;">危险废物产生量（t）</div>
							<div style="font-size: 18px;font-weight: bold;margin-top: 10px;">{{(totalParams1.total).toFixed(2)}}</div>
						</div>

						<div v-if="totalParams1.show">
							<div style="height: 190px;;width: 100%;margin-bottom: 10px" id="categoryChart1">
							</div>
							<div style="height: 200px;width: 100%;" id="chart1"></div>
						</div>

						<div style="height: 390px;;width: 100%;color: #999;font-weight: bold;line-height: 95px;text-align: center;"
							v-else>
							暂无危险废物产生量数据
						</div>
					</div>
				</el-col>

				<el-col :span="8">
					<div style="background: #fff;border-radius: 4px;padding: 10px;;">
						<div style="margin-bottom: 10px;">
							<div style="font-size: 13px;font-weight: bold;">危险废物处置（t）</div>
							<div style="font-size: 18px;font-weight: bold;margin-top: 10px;">{{(totalParams2.total).toFixed(2)}}</div>
						</div>

						<div v-if="totalParams2.show">
							<div style="height: 190px;;width: 100%;margin-bottom: 10px" id="categoryChart2">
							</div>
							<div style="height: 200px;width: 100%;" id="chart2"></div>
						</div>

						<div style="height: 390px;;width: 100%;color: #999;font-weight: bold;line-height: 95px;text-align: center;"
							v-else>
							暂无危险废物处置数据
						</div>
					</div>
				</el-col>

				<el-col :span="8">
					<div style="background: #fff;border-radius: 4px;padding: 10px;;">
						<div style="margin-bottom: 10px;">
							<div style="font-size: 13px;font-weight: bold;">危险废物库存（t）</div>
							<div style="font-size: 18px;font-weight: bold;margin-top: 10px;">{{(totalParams3.total).toFixed(2)}}</div>
						</div>

						<div style="border-bottom: 1px solid#F0F0F0;">
							<div v-if="totalParams3.show">
								<div style="height: 190px;;width: 100%;margin-bottom: 10px" id="categoryChart3"></div>
							</div>
							<div
								style="height: 190px;;width: 100%;color: #999;font-weight: bold;line-height: 95px;text-align: center;"
								v-else>
								暂无危险废物库存数据
							</div>
						</div>


						<div style="height: 190px;width: 100%;margin-top: 10px;display: flex;padding: 20px 0;">
							<div
								style="padding:50px 20px;background: #DF5353;color: #fff;text-align: center;border-radius: 8px;width: 45%;margin-right: 5%;height: 150px;">
								<div style="font-size: 24px;">{{storageWarnings.length}}</div>
								<div style="font-size: 14px;margin-top: 10px;">预警数量</div>
							</div>
							<div style="max-height: 190px;overflow-y: auto;" v-if="storageWarnings.length > 0">
								<div v-for="(item,index) in storageWarnings" :key="index" class="u-type-info">{{item.content}}</div>
							</div>
							<div style="height: 190px;width: 50%;color: #999;font-weight: bold;line-height: 95px;text-align: center;"
								v-else>
								暂无危废预警
							</div>
						</div>
					</div>
				</el-col>
			</el-row>


			<div style="margin-top: 20px;background: #fff;border-radius: 4px;padding: 15px;">
				<!-- <div style="font-size: 15px;margin-bottom: 10px;font-weight: bold;">产生</div> -->

				<div class="displayFlex mb10">
					<div v-if="productList.length > 0" style="width: 100%;">
						<div v-for="(item,index) in productList" @click="productId = item.entWasteId,getDataList()" :key="index"
							:class="[productId == item.entWasteId?'selectedClass':'']"
							style="background: #ECF4FE;padding: 5px 20px;color: #333;margin-right: 10px;cursor: pointer;display: inline-block;margin-bottom: 10px;">
							{{item.wasteName}}
						</div>
					</div>
				</div>
				<div style="display: flex;align-items: center;justify-content: space-between;;">
					<div style="flex: 1;color: #555555;border: 1px solid#EAF1FB;padding: 10px;border-radius: 4px;">
						<div>
							<span style="color: #3A3EF4;font-weight: bold;margin-right: 15px;">|</span>
							<span>产生</span>
						</div>
						<div id="chart3" style="width: 100%;height: 200px;"></div>
					</div>

					<div style="flex: 1;color: #555555;border: 1px solid#EAF1FB;padding: 10px;border-radius: 4px;margin: 0 10px;">
						<div>
							<span style="color: #3A3EF4;font-weight: bold;margin-right: 15px;">|</span>
							<span>处置</span>
						</div>
						<div id="chart4" style="width: 100%;height: 200px;"></div>
					</div>

					<div style="flex: 1;color: #555555;border: 1px solid#EAF1FB;padding: 10px;border-radius: 4px;">
						<div>
							<span style="color: #3A3EF4;font-weight: bold;margin-right: 15px;">|</span>
							<span>库存</span>
						</div>
						<div id="chart5" style="width: 100%;height: 200px;"></div>
					</div>

				</div>
			</div>
		</div>
	</div>
</template>

<script>
	import * as echarts from 'echarts';
	import moment from 'moment'

	let that
	export default {
		name: '',
		data() {
			return {
				productList: [],
				productId: '',
				materialMonthQtyList: [],
				storageWarnings: [],
				params: {
					year: moment().format('YYYY'),
					//year: "2023"
				},
				totalParams1: {
					show: true,
					total: 0
				},
				totalParams2: {
					show: true,
					total: 0
				},
				totalParams3: {
					show: true,
					total: 0
				},
			}
		},
		created: function() {},
		mounted: function() {
			that = this
			// that.formcategory("chart1")
			// that.formPieChart("chart2")
			that.getData()
		},

		methods: {

			getData() {
				that.totalParams1.total = 0
				that.totalParams1.show = true
				that.totalParams2.total = 0
				that.totalParams2.show = true
				that.getWasteList()
				that.getProductList()
				that.getDisposeList()
				that.getMonthDisposeList()
				that.getDisposeListByTargetName()
				that.getInventoryList()
				that.getStorageWarnings()
			},

			getMonthDisposeList2() {
				let thisParams = JSON.parse(JSON.stringify(that.params))
				thisParams.entWasteId = that.productId
				that.ajax({
					url: 'hwReport/getMonthDisposeList',
					contentType: 'application/json',
					data: JSON.stringify(thisParams),
					success: function(result) {
						if (result.data) {
							let xAxisData = []
							let seriesData = []
							for (let item of result.data) {
								xAxisData.push(item.month)
								seriesData.push(item.qty)
							}
							that.formcategory("chart4", xAxisData, seriesData)
						}
					},
				})
			},

			getMonthInventoryList() {
				let thisParams = JSON.parse(JSON.stringify(that.params))
				thisParams.entWasteId = that.productId
				that.ajax({
					url: 'hwReport/getMonthInventoryList',
					contentType: 'application/json',
					data: JSON.stringify(thisParams),
					success: function(result) {
						if (result.data) {
							let xAxisData = []
							let seriesData = []
							for (let item of result.data) {
								xAxisData.push(item.month)
								seriesData.push(item.qty)
							}
							that.formcategory("chart5", xAxisData, seriesData)
						}
					},
				})
			},

			getMonthProduceList() {
				let thisParams = JSON.parse(JSON.stringify(that.params))
				thisParams.entWasteId = that.productId
				that.ajax({
					url: 'hwReport/getMonthProduceList',
					contentType: 'application/json',
					data: JSON.stringify(thisParams),
					success: function(result) {
						if (result.data) {
							let xAxisData = []
							let seriesData = []
							for (let item of result.data) {
								xAxisData.push(item.month)
								seriesData.push(item.qty)
							}
							that.formcategory("chart3", xAxisData, seriesData)
						}
					},
				})
			},

			getDataList() {
				that.getMonthProduceList()
				that.getMonthDisposeList2()
				that.getMonthInventoryList()
			},

			getWasteList() {
				that.ajax({
					url: 'hwReport/getWasteList',
					contentType: 'application/json',
					data: JSON.stringify(that.params),
					success: function(result) {
						if (result.data) {
							that.productList = result.data
							if (result.data && result.data.length > 0) that.productId = result.data[0].entWasteId
							that.getDataList()
							that.$forceUpdate()
						}
					},
				})
			},

			getStorageWarnings() {
				//console.log(that.params)
				that.ajax({
					url: 'hwReport/getStorageWarnings',
					contentType: 'application/json',
					data: JSON.stringify(that.params),
					success: function(result) {
						//console.log("dddd",result)
						if (result.data) {
							that.storageWarnings = result.data
						}
					},
				})
			},

			getInventoryList() {
				let thisParams = JSON.parse(JSON.stringify(that.params))
				delete thisParams.year
				//console.log(thisParams)
				that.ajax({
					url: 'hwReport/getInventoryList',
					contentType: 'application/json',
					data: JSON.stringify(thisParams),
					success: function(result) {
						if (result.data && result.data.length > 0) {
							let yAxisData = []
							let seriesData = []
							for (let item of result.data) {
								yAxisData.push(item.storageName)
								seriesData.push(item.totalAmount)
								that.totalParams3.total += item.totalAmount
							}
							that.formCategoryChart("categoryChart3", yAxisData, seriesData)
							that.$forceUpdate()
						} else {
							that.totalParams3.show = false
						}
					},
				})
			},

			getDisposeListByTargetName() {
				that.ajax({
					url: 'hwReport/getDisposeListByTargetName',
					contentType: 'application/json',
					data: JSON.stringify(that.params),
					success: function(result) {
						if (result.data) {
							let yAxisData = []
							let seriesData = []
							for (let item of result.data) {
								yAxisData.push(item.targetName || '无')
								seriesData.push(item.totalAmount)
								item.name = item.targetName || '无'
								item.value = item.totalAmount
							}
							that.formPieChart("chart2", yAxisData, result.data)
							that.$forceUpdate()
						}
					},
				})
			},

			getDisposeList() {
				that.ajax({
					url: 'hwReport/getDisposeList',
					contentType: 'application/json',
					data: JSON.stringify(that.params),
					success: function(result) {


						if (result.data && result.data.length > 0) {
							let yAxisData = []
							let seriesData = []
							for (let item of result.data) {
								yAxisData.push(item.wasteName)
								seriesData.push(item.totalAmount)

								that.totalParams2.total += item.totalAmount
							}
							that.formCategoryChart("categoryChart2", yAxisData, seriesData)
							that.$forceUpdate()
						} else {
							that.totalParams2.show = false
						}
					},
				})
			},

			getProductList() {
				that.ajax({
					url: 'hwReport/getProduceList',
					contentType: 'application/json',
					data: JSON.stringify(that.params),
					success: function(result) {

						if (result.data && result.data.length > 0) {
							let yAxisData = []
							let seriesData = []
							for (let item of result.data) {
								yAxisData.push(item.wasteName)
								seriesData.push(item.totalAmount)
								that.totalParams1.total += item.totalAmount
							}
							that.formCategoryChart("categoryChart1", yAxisData, seriesData)
							that.$forceUpdate()
						} else {
							that.totalParams1.show = false
						}
					},
				})
			},

			getMonthDisposeList() {
				that.ajax({
					url: 'hwReport/getMonthDisposeList',
					contentType: 'application/json',
					data: JSON.stringify(that.params),
					success: function(result) {
						if (result.data) {
							let xAxisData = []
							let seriesData = []
							for (let item of result.data) {
								xAxisData.push(item.month)
								seriesData.push(item.qty)

							}
							that.formcategory("chart1", xAxisData, seriesData)
							that.$forceUpdate()
						}
					},
				})
			},

			formCategoryChart(chartId, yAxisData, seriesData) {
				var chartDom = document.getElementById(chartId);
				var myChart = echarts.init(chartDom);
				var option;

				option = {
					tooltip: {
						trigger: 'item',
						axisPointer: {
							type: 'shadow'
						}
					},
					grid: {
						top: '5%',
						left: '0%',
						right: '8%',
						bottom: '0%',
						containLabel: true
					},
					xAxis: {
						type: 'value',
						splitLine: {
							show: false,
						},
						axisTick: {
							show: false // 不显示坐标轴刻度线
						},
						axisLine: {
							lineStyle: {
								opacity: 0 //将y轴刻度线的opacity属性设置为0，即为隐藏刻度线
							}
						},
						axisLabel: {
							formatter: function(name) {
								return (name.length > 8 ? (name.slice(0, 6) + "...") : name);
							},

						}
					},
					yAxis: {
						type: 'category',
						boundaryGap: true,
						data: yAxisData,
						splitLine: {
							show: false,
						},
						axisTick: {
							show: false // 不显示坐标轴刻度线
						},
						axisLabel: {
							formatter: function(name) {
								return (name.length > 8 ? (name.slice(0, 6) + "...") : name);
							},

						}
					},

					series: [{
						name: '处置量',
						type: 'bar',
						itemStyle: {
							//color: '#3a3ef4', //设置柱子的颜色为红色
						},
						barWidth: 20,
						data: seriesData,
					}]
				};

				option && myChart.setOption(option);
			},

			formPieChart(chartId, yAxisData, seriesData) {
				console.log(yAxisData)
				var chartDom = document.getElementById(chartId);
				var myChart = echarts.init(chartDom);
				var option;

				option = {
					grid: {
						right: "5%",
					},
					tooltip: {
						trigger: 'item',
						formatter: '{a} <br/>{b} : {c} ({d}%)'
					},
					avoidLabelOverlap: false,
					legend: {
						type: 'scroll',
						orient: 'vertical',
						right: 10,
						top: 20,
						bottom: 20,
						data: yAxisData,
						formatter: function(name) {
							return (name.length > 12 ? (name.slice(0, 12) + "...") : name)
						}
					},

					series: [{
						name: '去向',
						type: 'pie',
						radius: '55%',
						center: ['20%', '50%'],
						data: seriesData,
						right: 10,
						label: {
							normal: {
								show: false
							},
						},
						labelLine: {
							normal: {
								show: false
							}
						},
						emphasis: {
							itemStyle: {
								shadowBlur: 10,
								shadowOffsetX: 0,
								shadowColor: 'rgba(0, 0, 0, 0.5)'
							}
						}
					}]
				};

				option && myChart.setOption(option);
			},


			formcategory(charyId, xAxisData, seriesData) {
				var chartDom = document.getElementById(charyId);
				var myChart = echarts.init(chartDom);
				var option;

				option = {
					tooltip: {
						trigger: 'axis',
						axisPointer: {
							type: 'shadow'
						}
					},
					grid: {
						top: "12%",
						bottom: "10%",
						left: "15%"
					},
					xAxis: {
						type: 'category',
						boundaryGap: false,
						data: xAxisData,
						splitLine: {
							show: false,
						},
						axisTick: {
							show: false // 不显示坐标轴刻度线
						},
						axisLine: {
							lineStyle: {
								opacity: 0 //将y轴刻度线的opacity属性设置为0，即为隐藏刻度线
							}
						}
					},
					yAxis: {
						type: 'value',
						splitLine: {
							show: false,
						},
						axisTick: {
							show: false // 不显示坐标轴刻度线
						},
						axisLine: {
							lineStyle: {
								opacity: 0 //将y轴刻度线的opacity属性设置为0，即为隐藏刻度线
							}
						},
					},
					series: [{
						data: seriesData,
						type: 'line',
						smooth: true,
						symbol: "none",
						areaStyle: {
							color: {
								type: 'linear',
								colorStops: [ // 渐变颜色
									{
										offset: 1,
										color: '#EBF3FD',
									},
									{
										offset: 1,
										color: '#EBF3FD',
									},
								],
								global: false,
							},
						},
					}]
				};

				option && myChart.setOption(option);

			},
		}
	}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
	.el-col-20 {
		height: 60px;
		line-height: 60px;
		overflow-y: scroll;
	}

	.selectedClass {
		background: #3A3EF4 !important;
		color: #fff !important;
	}

	>>>.el-input__inner,
	.el-textarea__inner {
		background: #E7EFF9;
	}
</style>